<template>
  <div class="m-crumbs">
    <br />
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>
        <a href="/">猪猪外卖</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="#">{{this.category}}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <div class="m-product-categroy">
      
      <br />
      <el-row :gutter="20">
        <el-col :span="4">
          <el-link :underline="false" style="font-size:16px;">人均消费</el-link>
        </el-col>
        <el-col :span="4">
          <el-link
            @click="clickPrice(null, null)"
            :underline="false"
            type="primary"
            style="font-size:16px;"
          >全部</el-link>
        </el-col>
        <el-col :span="4">
          <el-link
            @click="clickPrice(0, 10)"
            type="warning"
            :underline="false"
            style="font-size:16px;"
          >0-10元</el-link>
        </el-col>
        <el-col :span="4">
          <el-link
            @click="clickPrice(10, 20)"
            type="warning"
            :underline="false"
            style="font-size:16px;"
          >10-20元</el-link>
        </el-col>
        <el-col :span="4">
          <el-link
            @click="clickPrice(20, 99999)"
            type="warning"
            :underline="false"
            style="font-size:16px;"
          >20元以上</el-link>
        </el-col>
      </el-row>
    </div>
    <shop-list @func="getTotalFromSon" ref="shopList" /><br/>
    <el-pagination style="margin-left:250px;"
      background layout="prev, pager, next"
      :page-size=size
      :current-page=page
      :total=total
      @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
import * as homeApi from "@/server/home.js";
import shopList from "./list";
export default {
  components: {
    shopList
  },
  data: function() {
    return {
      total: 10,
      size: 5,
      page: 1,
      category: "",
      type: "",
      price: -1
    };
  },
  methods: {
    clickCategory: function(e) {
      if (e === "全部") {
        this.type = e;
      } else {
        this.type = e.name;
      }
      this.$refs.shopList.getShopList(this.price);
    },
    clickPrice: function(p1, p2) {
      console.log(p1);
      console.log(p2);
      this.price = p1;
      this.$refs.shopList.getShopList(this.price, p2);
    },
    pageChange: function(p){
      this.$refs.shopList.page = p;
      this.$refs.shopList.getShopList(this.price);
    },
    getTotalFromSon: function(data){
      this.total = data;
    }
  },
  mounted() {
    this.category = this.$route.query.category;
    this.$refs.shopList.getShopList(this.price);
  }
};
</script>

<style lang="scss">
.m-product-categroy {
  margin-left: 0px;
  background: #fff;
  font-weight: 500;
  height: 110px;
  width: 1150px;
}
</style>
